<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Modal</title>
  </head>
  <body>
    <!-- 全局容器 -->
    <div class="flex items-center justify-center min-h-screen bg-slate-100">
      <!-- 卡片容器 -->
      <div
        class="flex flex-col p-6 m-3 space-y-10 bg-white rounded-2xl shadow-2xl md:flex-row md:space-y-0 md:space-x-10 md:m-0 md:p-16"
      >
        <!-- 图片 -->
        <div>
          <img
            src="/headphone.png"
            alt=""
            class="mx-auto duration-200 w-60 hover:scale-105"
          />
        </div>
        <!-- 内容 -->
        <div class="flex flex-col space-y-6">
          <!-- 标签和标题 -->
          <div class="flex flex-col mb-4 space-y-3 text-center md:text-left">
            <!-- 标签 -->
            <div>
              <div
                class="inline-block px-3 py-1 text-sm text-white bg-black rounded-full"
              >
                包邮
              </div>
            </div>
            <!-- 标题 -->
            <div class="max-w-sm text-2xl font-medium">
              Razer Kraken Kitty Edt Gaming Headset Quartz
            </div>
            <!-- 价格容器 -->
            <div class="flex flex-col mb-4 space-y-3 text-center md:text-left">
              <p class="line-through">¥799</p>
              <p class="text-5xl font-bold">¥599</p>
              <p class="text-sm font-light text-gray-400">
                此优惠有效期至 4 月 3 日或售完即止！
              </p>
            </div>
            <!-- 按钮组 -->
            <div class="group">
              <button
                class="w-full bg-blue-700 text-white border-b-8 border-b-blue-700 rounded-lg group-hover:border-t-8 group-hover:border-b-0 group-hover:bg-blue-700 group-hover:border-t-blue-700 group-hover:shadow-lg transition-all duration-150"
              >
                <div
                  class="px-8 py-4 bg-blue-500 rounded-lg group-hover:bg-blue-700 duration-150"
                >
                  加入购物车
                </div>
              </button>
            </div>
            <!-- 库存 -->
            <div class="flex items-center space-x-3 group">
              <div
                class="w-3 h-3 bg-green-400 rounded-full group-hover:animate-ping"
              ></div>
              <div class="text-sm">库存 50+ 件</div>
            </div>
            <!-- 底部按钮容器 -->
            <div
              class="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-4"
            >
              <button
                class="flex items-center justify-center py-3 px-5 space-x-3 border-2 border-gray-300 rounded-lg shadow-sm hover:bg-opacity-30 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-150"
              >
                <img src="/weight.png" alt="" class="w-8" />
                <span>加入购物车</span>
              </button>
              <button
                class="flex items-center justify-center py-3 px-5 space-x-3 border-2 border-gray-300 rounded-lg shadow-sm hover:bg-opacity-30 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-150"
              >
                <img src="/heart.png" alt="" class="w-8" />
                <span>加入心愿单</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
